<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/page/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:outputStylesheet>
a.no-decor>img {
    border: none;
}
</h:outputStylesheet>

	<ui:define name="title">Agregar proforma</ui:define>
	<ui:define name="content">

		<h:form id="form">
			<h:panelGrid columns="4" id="addGrid">
				<h:outputText value="Nombre de la proforma" />
				<h:inputText label="Nombre de la proforma" id="proformaNombre"
					value="#{addProformaView.edited.proformaNombre}" size="50"
						required="false">
					<f:validateLength maximum="50" />
				</h:inputText>
				<h:message for="proformaNombre" />
				<h:panelGroup />
				<h:outputText value="Observaciones" />
				<h:inputTextarea label="proformaObservaciones"
					id="proformaObservaciones"
					value="#{addProformaView.edited.proformaObservaciones}"
					size="100" required="false" />
					<h:message for="proformaObservaciones" />
				<h:panelGroup />
				<h:outputText value="Variables de proforma" />
				<rich:dataTable value="#{addProformaView.variablesSelected}" var="variableP" id="table"
				iterationStatusVar="it">
					<rich:column>
	                	<f:facet name="header">Variable</f:facet>
	               		<h:outputText value="#{variableP.variableNombre}" />
	           		</rich:column>
	           		<rich:column>
	                	<f:facet name="header">Precio</f:facet>
	               		<h:outputText value="#{variableP.variablePrecio}" />
	           		</rich:column>
					<rich:column>
						<f:facet name="header">Accion</f:facet>
						<a4j:commandLink styleClass="no-decor" execute="@this"
							render="@none"
							oncomplete="#{rich:component('confirmPane')}.show()">
							<h:graphicImage library="img/icons" name="delete.gif" alt="delete" />
							<a4j:param value="#{variableP.variableId}"
								assignTo="#{addProformaView.deletedVariableId}" />
						</a4j:commandLink>
					</rich:column>
				</rich:dataTable>
				<a4j:commandLink styleClass="no-decor" render="editGrid"
					execute="@this" oncomplete="#{rich:component('editPane')}.show()">
					<h:graphicImage library="img/icons" name="edit.gif" alt="alta" />
					<h:outputText value="Agregar variable" />
					<a4j:param value="#{it.index}"
						assignTo="#{addProformaView.currentIndex}" />
				</a4j:commandLink>
				<h:panelGroup />
				<h:outputText value="Precio Total $" />
				<h:inputText label="proformaPrecioTotal" id="proformaPrecioTotal"
					value="#{addProformaView.edited.proformaPrecioTotal}" size="10"
						required="false">
					<f:validateDoubleRange minimum="0" />
				</h:inputText>
				<h:message for="proformaPrecioTotal" />
				<h:panelGroup />
			</h:panelGrid>

			<h:commandButton action="#{addProformaView.store}" value="Guardar">
				<f:setPropertyActionListener target="#{addProformaView.edited.operacion}"
					value="#{applicationBean.operacionActual}" />
			</h:commandButton>

			<rich:popupPanel header="Variable" id="editPane"
				domElementAttachment="parent" autosized="true">
				<h:panelGrid columns="1" id="editGrid" style="font-size:11px;">
					<h:outputText value="Seleccione las variables a incluir" />
					<h:selectManyListbox label="Seleccione las variables a incluir" value="#{addProformaView.variablesIdSelected}">
						  <f:selectItems value="#{addProformaView.variables}"  var="vari"
								itemValue="#{vari.variableId}" itemLabel="#{vari.variableNombre}" />
					</h:selectManyListbox>
				</h:panelGrid>
				<a4j:commandButton value="Guardar" action="#{addProformaView.saveVariables}" render="table"
					execute="editPane"
					oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
				<a4j:commandButton value="Cancelar"
					onclick="#{rich:component('editPane')}.hide(); return false;" />
			</rich:popupPanel>
				
				<a4j:jsFunction name="remove" action="#{addProformaView.removeVariable}"
					render="table" execute="@this"
					oncomplete="#{rich:component('confirmPane')}.hide();" />

				<rich:popupPanel id="confirmPane" autosized="true">
			        Esta seguro que desea eliminar esta fila?
			        <a4j:commandButton value="Cancelar"
						onclick="#{rich:component('confirmPane')}.hide(); return false;" />
					<a4j:commandButton value="Borrar" onclick="remove(); return false;" />
				</rich:popupPanel>

		</h:form>

	</ui:define>
</ui:composition>
